<template>
  <view class="transfer-list-page">
    <view
      class="transfer-card"
      v-for="item in transferList"
      :key="item.transfer_code"
    >
      <view class="card-header">
        <view class="status-tag" :class="getStatusClass(item.transfer_state_name)">
          {{ item.transfer_state_name }}
        </view>
        <view class="bill-code">{{ item.transfer_code }}</view>
      </view>
      
      <!-- 转移单名称 -->
      <view class="info-section">
        <view class="info-row">
          <text class="info-label">转移单名称</text>
        </view>
        <view class="info-value">{{ item.transfer_name || '' }}</view>
      </view>
      
      <!-- 转移人、接收人 -->
      <view class="info-grid">
        <view class="grid-item">
          <text class="info-label">转移人</text>
          <text class="info-value">{{ item.transfer_user_name || '' }}</text>
        </view>
        <view class="grid-item">
          <text class="info-label">接收人</text>
          <text class="info-value">{{ item.receiver_user_name || '' }}</text>
        </view>
      </view>
      
      <!-- 转移日期、接收位置 -->
      <view class="info-grid">
        <view class="grid-item">
          <text class="info-label">转移日期</text>
          <text class="info-value">{{ item.f_transfer_date || '' }}</text>
        </view>
        <view class="grid-item">
          <text class="info-label">接收位置</text>
          <text class="info-value">{{ item.receiver_location_name || '' }}</text>
        </view>
      </view>
      
			<!-- 底部操作按钮 -->
			<view class="action-row">
				<up-button 
					type="primary" 
					plain 
					size="large"
					text="详情"
					@click="onDetail(item)"
					:customStyle="btnStyle"
				></up-button>
				
				<up-button 
					type="primary" 
					plain 
					size="large"
					text="审核记录"
					@click="goToAudit(item)"
					:customStyle="btnStyle"
				></up-button>
				
				<!-- 待审核或驳回状态：修改、删除 -->
				<up-button 
					v-if="item.transfer_state_name === '待审核' || item.transfer_state_name === '驳回'"
					type="primary" 
					plain 
					size="large"
					text="修改"
					@click="onEdit(item)"
					:customStyle="btnStyle"
				></up-button>
				
				<!-- 待审核状态：审核 -->
				<up-button 
					v-if="item.transfer_state_name === '待审核'"
					type="primary" 
					plain 
					size="large"
					text="审核"
					@click="onAudit(item)"
					:customStyle="btnStyle"
				></up-button>
				
				<!-- 待审核或驳回状态：删除 -->
				<up-button 
					v-if="item.transfer_state_name === '待审核' || item.transfer_state_name === '驳回'"
					type="error" 
					plain 
					size="large"
					text="删除"
					@click="onDelete(item)"
					:customStyle="btnStyle"
				></up-button>
				
				<!-- 审核通过状态：反审 -->
				<up-button 
					v-if="item.transfer_state_name === '审核通过'"
					type="warning" 
					plain 
					size="large"
					text="反审"
					@click="onUnAudit(item)"
					:customStyle="btnStyle"
				></up-button>
				
				<!-- 审核通过状态：签收 -->
				<up-button 
					v-if="item.transfer_state_name === '审核通过'"
					type="success" 
					plain 
					size="large"
					text="签收"
					@click="onReceive(item)"
					:customStyle="btnStyle"
				></up-button>
			</view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import http from "@/api/request";

// 在script中定义按钮样式
const btnStyle = {
  flex: 1,
  minWidth: '150rpx',
  height: '90rpx',
  fontSize: '34rpx',
  margin: '0 10rpx',
  borderRadius: '12rpx'
}

// 通过 props 传入 transferList
const props = defineProps({
  transferList: {
    type: Array,
    default: () => []
  }
});

function getStatusClass(status) {
  if (status === '完成') return 'status-done';
  if (status === '审核通过') return 'status-pass';
  if (status === '驳回') return 'status-reject';
  if (status === '待审核') return 'status-pending';
  return 'status-other';
}

function goToAudit(item) {
  uni.navigateTo({
    url: `/pages/assetTransfer/auditRecord?transferCode=${item.transfer_code}`
  });
}

function onDetail(item) {
  uni.navigateTo({
    url: `/pages/assetTransfer/detail?transferCode=${item.transfer_code}`
  });
}

function onEdit(item) {
  uni.navigateTo({
    url: `/pages/assetTransfer/add?transferCode=${item.transfer_code}`
  });
}

function onAudit(item) {
  uni.navigateTo({
    url: `/pages/assetTransfer/detail?transferCode=${item.transfer_code}&mode=audit`
  });
}

function onDelete(item) {
  uni.showModal({
    title: '提示',
    content: '确定要删除该转移单吗？',
    success: function (res) {
      if (res.confirm) {
        http.post('/api/module/Invoke', {
          pageCode: "assettransfer",
          params: {
            args: [
              {
                name: "interfaceCode",
                value: "assettransfer.softDeleteAssetTransferOrder"
              },
              {
                name: "transferCode",
                value: item.transfer_code
              }
            ]
          },
          methodName: "softDeleteAssetTransferOrder"
        }).then(res => {
          if (res.isSuccess) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            // 通知父组件刷新列表
            uni.$emit('data-changed');
          } else {
            uni.showToast({
              title: res.error || '删除失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
}

function onUnAudit(item) {
  uni.showModal({
    title: '提示',
    content: '确定要反审该转移单吗？',
    cancelText: '取消',
    confirmText: '确定',
    success: function (res) {
      if (res.confirm) {
        http.post('/api/module/Invoke', {
          pageCode: "assettransfer",
          params: {
            args: [
              {
                name: "interfaceCode",
                value: "assettransfer.approveAssetTransferOrder"
              },
              {
                name: "transferCode",
                value: item.transfer_code
              },
              {
                name: "auditState",
                value: "PENDING_REVIEW"
              }
            ]
          },
          methodName: "approveAssetTransferOrder"
        }).then(res => {
          if (res.isSuccess) {
            uni.showToast({
              title: '反审成功',
              icon: 'success'
            });
            // 通知父组件刷新列表
            uni.$emit('data-changed');
          } else {
            uni.showToast({
              title: res.error || '反审失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
}

function onReceive(item) {
  uni.showModal({
    title: '提示',
    content: '确定要签收该转移单吗？',
    cancelText: '取消',
    confirmText: '确定',
    success: function (res) {
      if (res.confirm) {
        http.post('/api/module/Invoke', {
          pageCode: "assettransfer",
          params: {
            args: [
              {
                name: "interfaceCode",
                value: "assettransfer.approveAssetTransferOrder"
              },
              {
                name: "transferCode",
                value: item.transfer_code
              },
              {
                name: "auditState",
                value: "COMPLETED"
              }
            ]
          },
          methodName: "approveAssetTransferOrder"
        }).then(res => {
          if (res.isSuccess) {
            uni.showToast({
              title: '签收成功',
              icon: 'success'
            });
            // 通知父组件刷新列表
            uni.$emit('data-changed');
          } else {
            uni.showToast({
              title: res.error || '签收失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.transfer-list-page {
  padding: 20rpx;
}

.transfer-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
  color: #fff;
  background-color: #909399;
}

.status-done {
  background-color: #67c23a;
}

.status-pass {
  background-color: #409eff;
}

.status-reject {
  background-color: #f56c6c;
}

.status-pending {
  background-color: #e6a23c;
}

.bill-code {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.info-section {
  margin-bottom: 20rpx;
}

.info-row {
  margin-bottom: 10rpx;
}

.info-label {
  font-size: 26rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.info-grid {
  display: flex;
  margin-bottom: 20rpx;
}

.grid-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 操作按钮容器样式 */
.action-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid #f0f0f0;
  gap: 20rpx;
}

.action-link {
	color: #2979ff;
  font-size: 26rpx;
  cursor: pointer;
  text-align: center;
  flex: 1;
}
</style>